<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/mayioa/css/mayioa-ui.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-socre-edit" th:object="${scoreInfo}">
			<input id="scoreRecordId" name="scoreRecordId"  type="hidden"  th:field="*{scoreRecordId}" />
			<input id="hscorePlanId"   type="hidden"  th:field="*{scorePlanId}" />
			<input id="hscoreUserId"   type="hidden"  th:field="*{scoreUserId}" />

			<div class="form-group">
				<label class="col-sm-3 control-label ">计划名称：</label>
				<div class="col-sm-8">
					<input class="form-control" th:value="*{planName}"  readonly/>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label ">用户工号：</label>
				<div class="col-sm-8">
					<input class="form-control" th:value="*{scoreUserId}+'  '+ *{userName}"  readonly/>
				</div>
			</div>
			<div class="row" v-for="(item,key) in projectOption">
				<div class="form-group" style="margin-left:60px;"  >
					<label class="col-sm-2 control-label " style="margin-left:10px;">打分项目：</label>
					<div class="col-sm-3" style="width:160px;">
						<input class="form-control" type="text" :id="'scorePlanItem'+key"  :name="item.dId" v-model="item.dname"  readonly/>
					</div>
					<label class="col-sm-1 control-label " style="width:72px;margin-left:15px;">分数：</label>
	
					<div class="col-sm-2" style="width:185px;padding:0;" v-if="item.itemType!=3">
						<input class="form-control" type="text" :id="'score'+key" :name="item.dname" :value="item.scoreInfo"/>
					</div>
					<div class="col-sm-2" style="width:185px;padding:0;" v-if="item.itemType==3">
						<select :id="'score'+key" class="form-control m-b" th:with="type=${@dict.getType('plan_achievement_score')}" :value="item.scoreInfo">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
						</select>
					</div>
					<div class="col-sm-1" style="width: 73px; padding: 0;line-height: 34px;padding-left:5px;" v-if="item.itemType!=3">{{item.pScore}}/{{item.dscore}}</div>
				</div>
				<div class="form-group" style="margin-bottom:35px;">
						<label class="col-sm-3 control-label" style="margin-left:7px;">备注：</label>
						<div class="col-sm-8" style="width:504px;">
							<input class="form-control" type="text" :id="'reason'+key"   :name="item.dReason" :value="item.scoreRemark"/>
						</div>
				</div>
			</div>
			
		</form>
	</div>
	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
	<script th:src="@{/js/vue.js}"></script>
	<script>
	window.scoreEdit=new Vue({
			el:"#form-socre-edit",
			data:{
				userOption:[],
				projectOption:[]
			},
			created:function(){

			},
			mounted:function(){
				this.projectItem();
				this.formValidate();
			},
			methods: {
				formValidate: function(){
					var _this=this;
					var rule={};
					for(var i=0;i<_this.projectOption.length;i++){
						rule[_this.projectOption[i].dname]={
			        		number:true,
			        		max:_this.projectOption[i].dscore
			        	}
					}
					$("#form-socre-edit").validate({
			        	rules:rule
			        });
				},

				projectItem: function(){
					var _this=this;
					$.ajax({
		        		cache : true,
		        		type : "GET",
		        		url : ctx + "score/score/getPlanDetailScoreSelect",
		        		data : {
		        			"scorePlanId": $("#hscorePlanId").val(),
		        			"userId": $("#hscoreUserId").val(),
		        		},
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
		        			_this.projectOption=data;

		        		}
		        	});
				},
		        add: function () {
		        	var _this=this;
					var data={
						"scoreUserId":$("#hscoreUserId").val(),
		        		"scorePlanId": $("#hscorePlanId").val()
					}
					var planItemIds ="";
					var planItemScores ="";
					var planItemsReasons="";
					for(var i=0;i<_this.projectOption.length;i++){
						if($("#score"+i).val()!=""){
							planItemIds =planItemIds+","+_this.projectOption[i].dId;

							planItemScores = planItemScores+","+$("#score"+i).val();
							planItemsReasons+=","+$("#reason"+i).val();
						}
					}
					data["planItemIds"] = planItemIds ;
					data["planItemScores"] = planItemScores ;
					data["planItemsReasons"] = planItemsReasons ;
		        	$.ajax({
		        		cache : true,
		        		type : "POST",
		        		url : ctx + "score/score/edit",
		        		data : data,
		        		async : false,
		        		error : function(request) {
		        			$.modal.alertError("系统错误");
		        		},
		        		success : function(data) {
		        			$.operate.saveSuccess(data);
		        		}
		        	});
		        }
			}
		})

        function submitHandler() {
	        if ($.validate.form()) {
	        	window.scoreEdit.add();
	        }
	    }

    </script>
</body>
</html>
